﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../../Content/js/angular1.2.13.js"></script>
    
</head>
<body ng-app="app">
    <input type="text" ng-model="myUrl" />
    
    <div my-directive some-attr="{{myUrl}}" my-link-text="Click me to go to Google"></div>
    <script >
        angular.module('app', [])
        .directive('myDirective', function () {
            return {
                restrict: 'A',
                replace: true,
                scope: {
                    myUrl: '@someAttr',
                    myLinkText:'@'
                },
                template: '<a href="{{myUrl}}">{{myLinkText}}</a>'
            };
        });

    </script>
</body>
</html>
